<template>
    <!-- 用户留言页面容器 -->
    <div class="page-container">
        <!-- 卡片 -->
        <el-card class="message-card">
            <div slot="header" class="card-header">
                <!-- 标题 -->
                <h2 class="title">用户留言（{{ total }}）</h2>
                <!-- 添加留言按钮 -->
                <el-button @click="handleAddClick" type="primary" size="medium" icon="el-icon-edit">吐槽一下</el-button>
            </div>

            <!-- 留言列表 -->
            <div class="message-list" v-loading="listLoading">
                <div class="message-item beautified" v-for="item in list" :key="item.id">
                    <div class="message-content">
                        <div class="user-info">
                            <img :src="$baseFileUrl + (item.member?.head || 'default.jpg')" class="avatar beautified-avatar" />
                            <span class="username highlight">{{ item.member?.name || '未知用户' }}</span>
                            <span class="time">{{ item.createTime }}</span>
                        </div>
                        <div class="comment-text highlight-content">{{ item.comment }}</div>
                        <!-- 回复内容 -->
                        <div class="reply-container beautified-reply" v-if="item?.reply">
                            <div class="admin-reply">
                                <div class="admin-info">
                                    <img src="@/assets/head.jpg" class="admin-avatar beautified-avatar" />
                                    <div class="admin-meta">
                                        <span class="admin-name">管理员回复</span>
                                        <span class="reply-time">{{ item.replyTime }}</span>
                                    </div>
                                </div>
                                <div class="reply-text">{{ item.reply }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页器 -->
            <el-pagination 
                class="pagination"
                background 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange"
                :current-page="pageNum" 
                :page-sizes="[10, 20]" 
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" 
                :total="total">
            </el-pagination>
        </el-card>

        <!-- 留言对话框 -->
        <el-dialog 
            title="发表留言" 
            :visible.sync="showDialog" 
            :before-close="handleDialogClose"
            width="500px"
            custom-class="message-dialog">
            <!-- 留言输入框 -->
            <el-input 
                type="textarea" 
                :rows="4" 
                placeholder="请输入你的留言..." 
                v-model="dialogForm.comment"
                resize="none"
                class="message-input">
            </el-input>
            <!-- 留言对话框底部 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="dialogConfirm">发 表</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { findMessagePageAPI, addMessageAPI } from "@/api/message";
import { mapState } from 'vuex'
export default {
    name: 'FrontMessage',

    data() {
        return {
            list: [],
            listLoading: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            showDialog: false,
            dialogForm: {},
            searchForm: {}
        };
    },

    created() {
        this.fetchData();
    },

    computed: {
        ...mapState(['user', 'role', 'token'])
    },

    methods: {
        handleDialogClose() {
            this.showDialog = false
        },
        handleSizeChange(val) {//每页显示条数改变
            this.pageSize = val;
            this.fetchData();
        },
        handleCurrentChange(val) {//当前页码改变
            this.pageNum = val;
            this.fetchData();
        },
        handleSearch() {//点击搜索按钮
            this.pageNum = 1;
            this.fetchData();
        },
        async fetchData() {//查询数据
            try {
                this.listLoading = true;
                const response = await findMessagePageAPI(
                    this.pageNum,
                    this.pageSize,
                    this.searchForm
                );
                
                if (response && response.data) {
                    this.list = response.data.records || [];
                    this.total = response.data.total || 0;
                } else {
                    this.$message.error('获取数据失败');
                }
            } catch (error) {
                console.error('获取留言列表失败:', error);
                this.$message.error('获取留言列表失败，请稍后重试');
            } finally {
                this.listLoading = false;
            }
        },
        //点击吐槽按钮
        handleAddClick() {
            if (!this.token) {
                this.$message({ type: 'error', message: '请先登录！' })
                setTimeout(() => this.$router.push('/login'), 1000)
                return
            }
            this.dialogForm = {};
            this.showDialog = true;
        },
        //点击吐槽弹框确认按钮
        async dialogConfirm() {
            if(!this.dialogForm.comment || this.dialogForm.comment.trim() === ''){
                this.$message({
                    message: "内容不能为空！",
                    type: "error",
                });
                return;
            }
            try {
                const res = await addMessageAPI(this.dialogForm);
                this.$message({
                    message: res.message,
                    type: res.flag ? "success" : "error",
                });
                if(res.flag){
                    this.showDialog = false;
                    this.fetchData();
                }
            } catch (error) {
                console.error('发表留言失败:', error);
                this.$message.error('发表留言失败，请稍后重试');
            }
        }
    },
};
</script>

<style lang="less" scoped>
@deep-bg: linear-gradient(135deg, #232946 0%, #393e46 100%);
@gold: #ffd700;
@main-blue: #409EFF;
@light-gray: #bbb;

.page-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;

    .message-card {
        border-radius: 12px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.18);
        background: rgba(35, 41, 70, 0.98) !important;
        border: 1.5px solid @gold !important;
        color: #fff !important;
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            .title {
                margin: 0;
                font-size: 22px;
                font-weight: 600;
                color: @gold;
                letter-spacing: 1px;
                text-shadow: 0 2px 8px #000a;
            }
        }
        .message-list {
            .message-item.beautified {
                background: rgba(255,255,255,0.10);
                border-radius: 12px;
                margin-bottom: 22px;
                box-shadow: 0 2px 12px 0 rgba(0,0,0,0.12);
                padding: 28px 24px 18px 24px;
                transition: box-shadow 0.3s;
                border: 1.5px solid rgba(255,215,0,0.12);
                &:hover {
                    box-shadow: 0 6px 24px 0 rgba(0,0,0,0.18);
                    border-color: @gold;
                }
                .user-info {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                    .avatar.beautified-avatar {
                        width: 48px;
                        height: 48px;
                        border-radius: 50%;
                        object-fit: cover;
                        margin-right: 16px;
                        border: 2.5px solid @gold;
                        box-shadow: 0 0 12px #ffd70055;
                        background: #fff;
                    }
                    .username.highlight {
                        color: @gold;
                        font-size: 20px;
                        font-weight: bold;
                        margin-right: 16px;
                        letter-spacing: 1px;
                        text-shadow: 0 2px 8px #000a;
                    }
                    .time {
                        color: #bbb;
                        font-size: 13px;
                        margin-left: auto;
                    }
                }
                .comment-text.highlight-content {
                    color: #fff;
                    font-size: 18px;
                    font-weight: 600;
                    margin: 10px 0 0 64px;
                    text-shadow: 0 2px 8px #0006;
                    line-height: 1.8;
                }
                .reply-container.beautified-reply {
                    background: rgba(255, 215, 0, 0.10);
                    border-left: 4px solid @gold;
                    margin: 18px 0 0 64px;
                    padding: 16px 20px 12px 20px;
                    border-radius: 8px;
                    .admin-reply {
                        .admin-info {
                            display: flex;
                            align-items: center;
                            margin-bottom: 8px;
                            .admin-avatar.beautified-avatar {
                                width: 36px;
                                height: 36px;
                                border-radius: 50%;
                                margin-right: 12px;
                                border: 2px solid @gold;
                                box-shadow: 0 0 8px #ffd70055;
                                background: #fff;
                            }
                            .admin-meta {
                                display: flex;
                                flex-direction: column;
                                .admin-name {
                                    font-size: 15px;
                                    font-weight: 600;
                                    color: @gold;
                                }
                                .reply-time {
                                    font-size: 12px;
                                    color: #909399;
                                }
                            }
                        }
                        .reply-text {
                            font-size: 15px;
                            color: #ffd700;
                            line-height: 1.7;
                            margin-left: 48px;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
        .pagination {
            margin-top: 20px;
            text-align: center;
            padding-bottom: 20px;
        }
    }
}

// 弹窗样式
:deep(.message-dialog) {
    .el-dialog__header {
        padding: 20px;
        border-bottom: 1px solid #ebeef5;
    }

    .el-dialog__body {
        padding: 30px 20px;

        .message-input {
            .el-textarea__inner {
                padding: 12px;
                font-size: 14px;
                border-radius: 4px;
                
                &:focus {
                    border-color: #409EFF;
                }
            }
        }
    }

    .el-dialog__footer {
        padding: 20px;
        border-top: 1px solid #ebeef5;
    }
}

.text-gray, .font-14, .my-10, .mb-10 {
    color: @light-gray !important;
}

.text-bold, .font-bold, .bold {
    color: #bbb !important;
    font-weight: bold;
}

.el-card, .el-dialog, .el-card__body {
    background: #232946 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18) !important;
    border: 1.5px solid #ffd700 !important;
    color: #fff !important;
}
.el-dialog__header, .el-dialog__footer {
    background: #232946 !important;
    border: none !important;
}
</style>